<template>
  <div class="child">
    <!-- <el-card class="child"> -->
    <el-divider content-position="left">预警项规则</el-divider>
    <el-row class="child_buttons">
      <el-col :span="24">
        <el-button size="small" type="primary" @click="addRow()">{{ $t('add') }}</el-button>
      </el-col>
    </el-row>
    <vxe-table ref="editable" :data="dataList" class="vxe-table-element" :sort-config="{trigger:'row'}" @sort-change="sortChange"
      auto-resize :edit-config="{trigger: 'click', mode: 'row' }" :edit-rules="dataRule" style="width: 100%;">
      <template v-slot:empty>无数据</template>
      <vxe-table-column type="index" fixed="left" width="50" align="center"></vxe-table-column>
      <!--规则定义描述  -->
      <vxe-table-column field="title" title="规则定义描述" :edit-render="{name: 'ElInput',autofocus:false}">
      </vxe-table-column>

      <!--业务类别（系统字典）  -->
      <vxe-table-column field="bizSort" title="业务类别" :edit-render="{name: 'ElSelect',
                         options:$getDictList('MSG_BIZ_SORT', true),
                         optionProps:{value: 'val', label: 'label' } }">
      </vxe-table-column>
      <vxe-table-column field="bizType" title="业务类型" :edit-render="{name: 'ElSelect',
                         options:$getDictList('MSG_BIZ_TYPE1', true),
                         optionProps:{value: 'val', label: 'label' } }">
      </vxe-table-column>
      <vxe-table-column field="timeType" title="时间类型" :edit-render="{name: 'ElSelect',
                         options:$getDictList('MSG_TIME_TYPE', true),
                         optionProps:{value: 'val', label: 'label' } }">
      </vxe-table-column>
      <vxe-table-column field="num" title="天数" :edit-render="{name: 'ElInput',autofocus:false}"></vxe-table-column>
      <vxe-table-column field="limitAmount" title="阈值" :edit-render="{name: 'ElInput',autofocus:false}"></vxe-table-column>
      <vxe-table-column title="handle" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-delete" size="small" @click="deltRow(scope.row)">{{ $t('delete') }}</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- </el-card> -->
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/msg/msgBizRule/list',
        getDataListIsPage: false,
        deleteURL: '/msg/msgBizRule',
        deleteIsBatch: false
      },
      // 查询条件 在 mixinViewModule 中使用
      dataForm: {
        id: '',
        title: '',
        eventCode: '',
        bizSort: '',
        bizType: '',
        limitAmount: 0,
        updater: '',
        updateDate: ''
      },
      // 新增行默认值
      defaultData: {
        id: '',
        title: '',
        eventCode: '',
        bizSort: '*',
        bizType: '*',
        timeType: '',
        timeUnit: 'D',
        limitAmount: 0,
        updater: '',
        updateDate: ''
      },
      deltList: [],
      dataRule: {
        eventCode: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        title: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        num: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { type: 'number', message: '必须为数值类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    footerMethod ({ columns, data }) {
      const sums = []
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('合计')
        } else {
          let sumCell = null
          switch (column.property) {
          }
          sums.push(sumCell)
        }
      })
      // 返回一个二维数组的表尾合计
      return [sums]
    },
    // 新增
    addRow () {
      // 默认插入一行 可以设置插入数据的默认值 自行处理
      this.$refs.editable.insertAt(this.defaultData, -1).then(({ row }) => {
        // 设置插入行的可编辑状态
        this.$refs.editable.setActiveRow(row)
      })
    },
    getAllData () {
      return this.$refs.editable.getTableData().tableData
    },
    // 删除row
    deltRow (rowData) {
      // 主键是否为空
      if (rowData.id) {
        // 不为空将 row 移到 deltList
        this.deltList.push(rowData)
        // 移除行
        this.$refs.editable.remove(rowData)
      } else {
        this.$refs.editable.remove(rowData)
      }
    },
    async fullValidEvent () {
      const errMap = await this.$refs.editable.fullValidate().catch(errMap => errMap)
      let self = this
      if (errMap) {
        Object.values(errMap).forEach(errList => {
          errList.forEach(params => {
            let { rowIndex, column, rules } = params
            rules.forEach(rule => {
              self.$message.error(`第 ${rowIndex} 行 ${column.title} 校验错误：${rule.message}`)
            })
          })
        })
        return false
      } else {
        return true
      }
    }
  }
}
</script>
